{% extends 'oratk_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <style>
        #ins_leftName ,#ins_rightName,#sms_contact_leftName ,#sms_contact_rightName,#email_contact_leftName ,#email_contact_rightName{
            float: left;
            width: 350px;
            height: 200px;
        }
        #btn{
            float: left;
            width: 100px;
            height: 200px;
        }
        #ins_toRight,#ins_toLeft,#sms_contact_toRight,#sms_contact_toLeft,#email_contact_toRight,#email_contact_toLeft{
            margin-top:50px ;
            margin-left:30px;
            width: 50px;
        }
        .border{
            height: 200px;
            padding: 0px;
        }
    </style>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">编辑监控任务</h2>
        <form class="form-horizontal" action="{{ request.path }}" method="post" >
            <div class="form-group" style="display: none">
                <label class="col-sm-2 control-label">id：</label>
                <div class="col-sm-10">
                    <input type="text" style="width:300px;" class="form-control" name="add_nid" placeholder="id" value="{{ cron_task_result.id }}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">任务名称：</label>
                <div class="col-sm-10">
                    <input type="text" style="width:300px;" class="form-control" readonly="readonly"  name="add_name" placeholder="名称" value="{{ cron_task_result.name }}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">任务模板：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_tash_info" readonly="readonly">
                        <option>{{ cron_task_result.task_info }}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">描述：</label>
                <div class="col-sm-3">
                    <input type="text" style="width:300px;" class="form-control" name="add_desc" placeholder="描述" value="{{ cron_task_result.name__description }}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">任务类型：</label>
                <div class="col-sm-3">
                    <input type="text" style="width:300px;" class="form-control" name="add_task_type" placeholder="任务类型" value="{{ cron_task_result.task_type }}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">定时时间：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_task_time">
                        <option>{{ cron_task_result.task_time }}</option>
                        {% for i in task_time %}
                            <option>{{ i.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-2 control-label">监控项：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_task_point" readonly="readonly">
                        <option>{{ cron_task_result.task_point }}</option>
                        {% for i in task_point %}
                            <option>{{ i.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-4 control-label">未添加的主机信息</label>
                <label class="col-sm-5 control-label">已添加的主机信息</label></div>
            <div class="form-group">
                <div class="border">
                    <label class="col-sm-2 control-label" >主机信息：</label>
                    <select id="ins_leftName" multiple="multiple">
                        {% for i in host_info %}
                            <option id="all_ins_info">{{ i.name }}__{{ i.ip }}__{{ i.port }}</option>
                        {% endfor %}
                    </select>
                    <div id="btn">
                        <input type="button" id="ins_toRight" value="-->"><br>
                        <input type="button" id="ins_toLeft" value="<--">
                    </div>
                    <select id="ins_rightName" multiple="multiple" name="add_ins">
                        <option id="ins_info">{{ cron_task_result.instance }}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">是否有阀值：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_limit_status" id="limit_status" readonly="readonly">
                        <option>{{ cron_task_result.limit_status }}</option>
                        <option>0</option>
                        <option>1</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">阀值：</label>
                <div class="col-sm-10">
                    <input type="text" style="width:300px;" class="form-control" name="add_limit" placeholder="阀值"   value="{{ cron_task_result.limit }}">
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-2 control-label" >阀值单位：</label>
                <div class="col-sm-3">
                    <select  class="form-control" id="add_limit_unit" name="add_limit_unit">
                        <option>{{ cron_task_result.limit_unit }}</option>
                        <option>%</option>
                        <option>s</option>
                        <option>min</option>
                        <option>条</option>
                        <option>个</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">是否发短信：</label>
                <div class="col-sm-3">
                    <select  class="form-control" name="add_sms_status">
                        <option>{{ cron_task_result.sms_status }}</option>
                        <option>0</option>
                        <option>1</option>
                    </select>
                    <span>0表示关闭,1表示开启</span>
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-4 control-label">未添加的用户信息</label>
                <label class="col-sm-5 control-label">已添加的用户信息</label></div>
            <div class="form-group">
                <div class="form-group">
                    <div class="border">
                        <label class="col-sm-2 control-label" >请选择短信联系人：</label>
                        <select id="sms_contact_leftName" multiple="multiple">
                            {% for i in user_info %}
                                <option id="sms_userinfo">{{ i.username }}__{{ i.iphone }}</option>
                            {% endfor %}
                        </select>
                        <div id="btn">
                            <input type="button" id="sms_contact_toRight" value="-->"><br>
                            <input type="button" id="sms_contact_toLeft" value="<--">
                        </div>
                        <select id="sms_contact_rightName" multiple="multiple" name="add_sms_contact">
                            <option id="sms_contact_info">{{ cron_task_result.sms_contact }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">短信内容：</label>
                    <div class="col-sm-10">
                        <input type="text" style="width:300px;" id="sms_conent" class="form-control" name="add_sms_conent"  readonly="readonly" placeholder="短信内容为sql执行结果" >
                    </div>
                </div>
                <div class="form-group" id="mail_status_div">
                    <label class="col-sm-2 control-label" >是否发邮件：</label>
                    <div class="col-sm-3">
                        <select  class="form-control" id="mail_status" name="add_mail_status">
                            <option>否</option>
                            <option>是</option>
                        </select>
                    </div>
                </div>
                <div class="form-group" >
                    <label class="col-sm-4 control-label">未添加的用户信息</label>
                    <label class="col-sm-5 control-label">已添加的用户信息</label></div>
                <div class="form-group">
                    <div class="form-group">
                        <div class="border">
                            <label class="col-sm-2 control-label" >请选择邮件联系人：</label>
                            <select id="email_contact_leftName" multiple="multiple">
                                {% for i in user_info %}
                                    <option id="email_userinfo" >{{ i.username }}__{{ i.email }}</option>
                                {% endfor %}
                            </select>
                            <div id="btn">
                                <input type="button" id="email_contact_toRight" value="-->"><br>
                                <input type="button" id="email_contact_toLeft" value="<--">
                            </div>
                            <select id="email_contact_rightName" multiple="multiple" name="add_email_contact">
                                <option id="email_contact_info">{{ cron_task_result.email_contact }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮件内容：</label>
                        <div class="col-sm-3">
                            <input type="text" style="width:300px;" class="form-control" name="add_email_conent" placeholder="邮件内容">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_remake" placeholder="备注" value="{{ cron_task_result.remake }}">
                        </div>
                    </div>
                    <div class="col-sm-10">
                        {#                <button type="submit" class="btn ">提交</button>#}
                        <div style="text-align:center;vertical-align:middle;">
                            <input type="button" style="text-align:center;" class="btn"  id="all_select" value="全标记">
                            <input type="submit" style="text-align:center;" class="btn" value="保存">
                        </div>
                        <div style="text-align:center;vertical-align:middle;">
                            提交前记得点"全标记",默认提交的是鼠标选中的信息
                        </div>
                    </div>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script>

        $(document).ready(function(){

            //当有阀值时,短信内容为sql执行结果,
            //当有阀值时,把短信内容制灰


            var limit_status_val = $('#limit_status').find("option:checked").val()
            if ( limit_status_val == '1' ) {
                $('#sms_conent').prop("readonly", true)             }
            //实例信息
            //将已选中的实例信息,纵向展示
            //将右侧实例列表换成纵向展示
            var ins_str = $('#ins_info').text()
            var ins_arr = eval('('+ins_str+')')
            $('#ins_info').remove()
            var sel =document.getElementById("ins_rightName");
            var html="<option>" + ins_arr.join("</option><option>")+ "</option>";
            sel.innerHTML=html;

            //将左侧所有实例信息与右侧实例信息作比较取差集
            //一 将右侧实例信息添加到数组中
            var all_ins_arr = new Array();
            $("#ins_leftName option").each(function () {
                all_ins_arr.push($(this).val());
            });

            //二 取两个数组差值
            var left_arr = [];
            for (key in all_ins_arr) {
                var stra = all_ins_arr[key];
                var count = 0;
                for (var j = 0; j < ins_arr.length; j++) {
                    var strb = ins_arr[j];
                    if (stra == strb) {
                        count++;
                    }
                }
                if (count === 0) {
                    left_arr.push(stra);
                }
            }
            //三 将差值在左侧纵向展示
            $('#all_ins_info').remove()
            var sel =document.getElementById("ins_leftName");
            var html="<option>" + left_arr.join("</option><option>")+ "</option>";
            sel.innerHTML=html;



            //短信联系人
            //将已选中的短信联系人信息,纵向展示
            var sms_contact_str = $('#sms_contact_info').text()
            var sms_contact_arr = eval('('+sms_contact_str+')')
            $('#sms_contact_info').remove()
            var sel =document.getElementById("sms_contact_rightName");
            var html="<option>" + sms_contact_arr.join("</option><option>")+ "</option>";
            sel.innerHTML=html;

            //将左侧所有短信联系人信息与右侧短信联系人信息作比较取差集
            //一 将右侧短信联系人信息添加到数组中
            var sms_all_userinfo_arr = new Array();
            $("#sms_contact_leftName option").each(function () {
                sms_all_userinfo_arr.push($(this).val());
            });

            //二 取两个数组差值
            var left_arr = [];
            for (key in sms_all_userinfo_arr) {
                var stra = sms_all_userinfo_arr[key];
                var count = 0;
                for (var j = 0; j < sms_contact_arr.length; j++) {
                    var strb = sms_contact_arr[j];
                    if (stra == strb) {
                        count++;
                    }
                }
                if (count === 0) {
                    left_arr.push(stra);
                }
            }
            //三 将差值在左侧纵向展示
            $('#sms_all_userinfo').remove()
            var sel =document.getElementById("sms_contact_leftName");
            var html="<option>" + left_arr.join("</option><option>")+ "</option>";
            sel.innerHTML=html;



            //邮件联系人
            //将已选中的邮件联系人信息,纵向展示
            var email_contact_str = $('#email_contact_info').text()
            var email_contact_arr = eval('('+email_contact_str+')')
            $('#email_contact_info').remove()
            var sel =document.getElementById("email_contact_rightName");
            var html="<option>" + email_contact_arr.join("</option><option>")+ "</option>";
            sel.innerHTML=html;

            //将左侧所有邮件联系人息与右侧邮件联系人信息作比较取差集
            //一 将右侧实例信息添加到数组中
            var email_all_userinfo_arr = new Array();
            $("#email_contact_leftName option").each(function () {
                email_all_userinfo_arr.push($(this).val());
            });

            //二 取两个数组差值
            var left_arr = [];
            for (key in email_all_userinfo_arr) {
                var stra = email_all_userinfo_arr[key];
                var count = 0;
                for (var j = 0; j < email_contact_arr.length; j++) {
                    var strb = email_contact_arr[j];
                    if (stra == strb) {
                        count++;
                    }
                }
                if (count === 0) {
                    left_arr.push(stra);
                }
            }
            //三 将差值在左侧纵向展示
            $('#email_all_userinfo').remove()
            var sel =document.getElementById("email_contact_leftName");
            var html="<option>" + left_arr.join("</option><option>")+ "</option>";
            sel.innerHTML=html;

        });
    </script>
    <script>
        $(function () {
            //实例信息
            $("#ins_toRight").click(function () {
                $("#ins_rightName").append($("#ins_leftName > option:selected"));
            });
            $("#ins_toLeft").click(function () {
                $("#ins_leftName").append($("#ins_rightName > option:selected"));
            });


            //短信联系人信息
            $("#sms_contact_toRight").click(function () {
                $("#sms_contact_rightName").append($("#sms_contact_leftName > option:selected"));
            });
            $("#sms_contact_toLeft").click(function () {
                $("#sms_contact_leftName").append($("#sms_contact_rightName > option:selected"));
            });

            //邮件联系人信息
            $("#email_contact_toRight").click(function () {
                $("#email_contact_rightName").append($("#email_contact_leftName > option:selected"));
            });
            $("#email_contact_toLeft").click(function () {
                $("#email_contact_leftName").append($("#email_contact_rightName > option:selected"));
            });

            //右侧侧全选
            $("#all_select").click(function () {
                $("#ins_rightName option").prop("selected", "selected")
                $("#sms_contact_rightName option").prop("selected", "selected")
                $("#email_contact_rightName option").prop("selected", "selected")
            });
        })
    </script>
{% endblock %}

